
<template>
  <div class="container-m">
    <a href="javascript:;" @click="$router.push('/details?id='+Songid)">
      <el-image
        class="one"
        :src="songPlayList.coverImgUrl"
        fit="fit"
      >
      </el-image>
    </a>
    <div class="back">
      <span class="headset">
        <em class="el-icon-headset"></em>
      </span>
      <span class="palyes">{{
        songPlayList.playCount > 10000
          ? parseInt(songPlayList.playCount / 10000) + "万"
          : songPlayList.playCount
      }}</span>
      <a href="javascript:;" class="play">
        <em class="el-icon-video-play"></em>
      </a>
    </div>
    <p class="dec">
      <a href="" :title="songPlayList.name" class="dec-title">{{
        songPlayList.name
      }}</a>
    </p>
  </div>
</template>

<script>
export default {
  props: {
    songPlayList: {
      type: Object,
      require: true
    },
    Songid: {
      require: true
    }
  }
}
</script>

<style lang="less" scoped>
.container-m {
  position: relative;
  width: 140px;
  height: 175px;
  display: inline-block;
  margin: 20px 0px 10px 0px;
  flex-basis: 17%;
  .one {
    width: 100%;
    height: 140px;
  }
  .back {
    width: 100%;
    height: 25px;
    position: absolute;
    bottom: 35px;
    color: #ccc;
    background: rgba(0, 0, 0, 0.4);
  }
  .headset {
    margin: 0 5px -2px 10px;
  }
  .play {
    position: absolute;
    bottom: 3px;
    right: 5px;
  }
  .dec {
    width: 140px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    .dec-title {
      font-size: 14px;
      color: #000;
    }
    .oc {
      font-size: 12px;
    }
  }
}
.el-icon-video-play {
  color: white;
}
.el-icon-video-play:hover {
  color: rgb(212, 212, 212);
}
</style>
